<template>
  <view class="clientele-details">
    <navbar/>
    <u--form>
      <u-form-item ref="item1" label="头像" border-bottom>
        <u--image
          v-if="clienteleDetailsInfo.avatar != ''" :show-loading="true" :src="clienteleDetailsInfo.avatar"
          width="80px" height="80px"/>
      </u-form-item>
      <u-gap height="1" bg-color="#bbb"/>
      <u-form-item ref="item1" label="姓名" border-bottom>
        <u--input v-model="clienteleDetailsInfo.name" placeholder="请输入标题" border="bottom" :disabled="true"/>
      </u-form-item>
      <u-gap height="1" bg-color="#bbb"/>
      <u-form-item ref="item1" label="性别" border-bottom>
        <u--input v-model="clienteleDetailsInfo.sex" suffix-icon-style="color: #909399" :disabled="true"/>
      </u-form-item>
      <u-gap height="1" bg-color="#bbb"/>
      <u-form-item ref="item1" label="年龄" border-bottom>
        <u--input v-model="clienteleDetailsInfo.age" suffix-icon-style="color: #909399" :disabled="true"/>
      </u-form-item>
      <u-gap height="1" bg-color="#bbb"/>
      <u-form-item ref="item1" label="电话" border-bottom>
        <u--input v-model="clienteleDetailsInfo.phone" suffix-icon-style="color: #909399" :disabled="true"/>
      </u-form-item>
      <u-gap height="1" bg-color="#bbb"/>
      <u-form-item ref="item1" label="工作地址" border-bottom class="item_content from-content">
        <u--textarea
          v-model="clienteleDetailsInfo.address" maxlength="-1" height="80px" border="none"
          placeholder="请输入内容" :disabled="true"/>
      </u-form-item>
      <u-gap height="1" bg-color="#bbb"/>

    </u--form>
  </view>
</template>

<script>
import { $_getClientDetails } from '@/api/clientele/clientele.js'

export default {
  data() {
    return {
      hid: '',
      clienteleDetailsInfo: {}
    }
  },
  onLoad(hid) {
    this.hid = hid.hid
    this.clientDetails()
  },
  methods: {
    async clientDetails() {
      const res = await $_getClientDetails(this.hid)
      console.log(res)
      this.clienteleDetailsInfo = res.data.data
    }
  }
}
</script>

<style lang="scss" scoped>
.clientele-details {
  width: 100%;
  height: 100%;
  overflow-y: auto;

  :deep(.u-input) {
    padding: 0 !important;
    box-sizing: border-box;

  }

  :deep(.u-input) {
    border: none !important;
    background-color: #fff !important;
  }

  :deep(.u-textarea) {
    padding: 2px 0 0 0 !important;
  }

  :deep(.u-form-item__body__left) {
    align-items: flex-start !important;
    width: 80px !important;
  }

  :deep(.u-form-item__body__left__content ) {
    height: 24px !important;
  }

  :deep(.u-textarea--disabled) {
    background-color: #fff !important;
  }
}
</style>
